RSCSSっぽいCSS Modules設計

Vueですごく重宝している RSCSS の設計思想を CSS Modules に転用してReactでも使えるようにしたいなというアイデアです。

RSCSSとは

RSCSSはBEMの短縮版クラス命名規則みたいなものです。

例：フォームと送信ボタン

code:scss

// BEM

.contact { // Block

&__submit-button { // Element

&--disabled { } // Modifier

}

}

// RSCSS

.contact-form { // Component

& > .submit { } // Element

& > .submit.-disabled { } // Variant

}

code:html

<!-- BEM -->

<form className="contact">

<button className={classNames(

"contact__submit-button",

{ "contact__submit-button--disabled": isDisabled }

)}>Submit</button>

</form>

<!-- RSCSS -->

<form className="contact-form">

<button className={classNames(

"submit",

{ "-disabled": isDisabled }

)}>Submit</button>

</form>

特徴

ネストは１段まで

CSS ModulesにRSCSSの設計思想を持ち込む

利点

ScopedなCSSなのでクラス名を抽象的にできる

HTML上の表記が減る

HTML上とCSS上での表記が統一される（vs BEM）

問題点

基本的にクラス名にハイフンを使用できない

Componentはキャメルケースの２単語以上

Elementはすべて小文字のなるべく１単語

Variantはパスカルケース

RSCSS for CSS Modules

code:scss

.contactForm {

& > .submit { }

& > .submit.Disabled { }

}

code:html

<form className={styles.contactForm}>

<button className={classNames(

styles.submit,

)}>Submit</button>

</form>

比較的シンプルにCSS Modulesの運用ができるようになる気がする。

ｵﾏｹ: stylelint rule

code:yaml

rules:

rscss/class-format:

- true

maxDepth: 3

おわりに

そもそも、CSS Modulesで正しく親子関係だったり、Variantの表現ができるとは知らなかった。